<template>
  <div class="PerSonal">
    <InputBox :inputProps="admissionNumInput" />
    <SelectPick :selectProps="sexPick" />
    <SelectPick :selectProps="nationalityPick" />
    <SelectPick :selectProps="nationPick" />
    <InputBox :inputProps="idCardNoInput" />
    <SelectPick :selectProps="birthdayPick" />
    <InputBox :inputProps="phoneNoPick" />
    <SelectPick :selectProps="marriagePick" />
    <SelectPick :selectProps="professionPick" />
  </div>
</template>

<script lang="ts" setup>
import { IgetDetailByNoticeSerialNo } from '@/typings/getDetailByNoticeSerialNo';
import { commonTypes } from '@/typings/commonTypes';
import SelectPick from './SelectPick.vue';
import InputBox from './InputBox.vue';

import { Cell, CellGroup, Dialog, Step, Steps, Form, Field } from 'vant';
import type { FormInstance } from 'vant';

import { useStore } from 'vuex';
const store = useStore<commonTypes.IState>();

//因为这里用了script的setup方式就用不到 defineComponent 这个定义组件的api了
import {
  useSlots,
  useAttrs,
  defineProps,
  onMounted,
  watchEffect,
  ref,
  reactive,
  PropType,
  watch,
  computed,
} from 'vue';

const admissionNumInput: commonTypes.IselectProps = reactive({
  name: 'admissionNum',
  label: '住院号',
  required: true,
  readonly: true,
  keyTwo: 'admissionNum',
  keyOne: 'docAdmiNote',
});

const sexPick: commonTypes.IselectProps = reactive({
  name: 'sex',
  label: '性别',
  required: true,
  columns: computed(() => store.getters.getDictionaries).value.sex, //[{ name: '男的', code: 2 }],
  keyTwo: 'sex',
  keyOne: 'patAdmiNote',
});

const nationalityPick: commonTypes.IselectProps = reactive({
  name: 'nationality',
  label: '国籍',
  required: true,
  placeholder: '请选择国籍',
  columns: computed(() => store.getters.getDictionaries).value.nationality, //[{ name: '中国', code: 12 }],
  keyTwo: 'nationality',
  keyOne: 'patAdmiNote',
});
const nationPick: commonTypes.IselectProps = reactive({
  name: 'nation',
  label: '民族',
  required: true,
  placeholder: '请选择民族',
  columns: computed(() => store.getters.getDictionaries).value.nation, //[{ name: '汉族', a: 2 }],
  keyTwo: 'nation',
  keyOne: 'patAdmiNote',
});

const idCardNoInput: commonTypes.IselectProps = reactive({
  name: 'idCardNo',
  label: '身份证号',
  required: true,
  maxlength: 18, //身份证限制18位
  errorMessage: '请输入正确的身份证号',
  validator: (value, rule) => {
    if (
      value &&
      (!/\d{17}[\d|x]|\d{15}/.test(value) || (value.length !== 15 && value.length !== 18))
    ) {
      return false;
    } else {
      return true;
    }
  },
  keyTwo: 'idCardNo',
  keyOne: 'patAdmiNote',
});

const birthdayPick: commonTypes.IselectProps = reactive({
  name: 'birthday',
  label: '出生日期',
  required: true,
  type: 'date',
  keyTwo: 'birthday',
  keyOne: 'patAdmiNote',
});

const phoneNoPick: commonTypes.IselectProps = reactive({
  name: 'phoneNo',
  label: '手机号',
  required: true,
  maxlength: 11, //限制11位
  errorMessage: '请输入正确的手机号',
  validator: (value, rule) => {
    if (!/^1[34578]\d{9}$/.test(value)) {
      return false;
    } else {
      return true;
    }
  },
  keyTwo: 'phoneNo',
  keyOne: 'patAdmiNote',
});

const marriagePick: commonTypes.IselectProps = reactive({
  name: 'marriage',
  label: '婚姻',
  required: true,
  columns: computed(() => store.getters.getDictionaries).value.marriage,
  keyTwo: 'marriage',
  keyOne: 'patAdmiNote',
});
const professionPick: commonTypes.IselectProps = reactive({
  name: 'profession',
  label: '职业',
  required: true,
  columns: computed(() => store.getters.getDictionaries).value.profession,
  keyTwo: 'profession',
  keyOne: 'patAdmiNote',
});

//初始化赋值
const init = () => {
  //admissionNumInput.value = PerSonal.docAdmiNote?.admissionNum;
  //const form = computed((): IgetDetailByNoticeSerialNo.BusObj => store.getters.form);
  //admissionNumInput.value = form.value.docAdmiNote?.admissionNum;
  //console.log('init', admissionNumInput.value);
};

//获取父组件传的值
/*const props = defineProps({
  formPam: {
    // type:  Array as () => Array<string>, //(string也可以是其他你自定义的接口)
    type: Object as PropType<IgetDetailByNoticeSerialNo.IRootObject>,
    required: true,
    default: () => {
      return {};
    },
  },
});*/

onMounted(() => {
  //console.log(111111, PerSonal);
  //console.log('store.state:', store.state);
  //store.dispatch('formAction', { qq: 123 });
  //console.log('onMounted:', PerSonal.docAdmiNote?.admissionNum);
  //console.log('PerSonal.docAdmiNote?.admissionNum:', PerSonal.docAdmiNote?.admissionNum);
});

// 1.监听对象 赋值
watch(
  () => store.state.form, //props.formPam,
  (FormPam) => {
    init();
  },
  {
    deep: true, // 深度监听的参数
    immediate: true, //绑定值就开始执行监听
  },
);

//watchEffect 会最先执行
watchEffect(() => {
  //console.log('watchEffect:', 3333);
  // const form = computed((): IgetDetailByNoticeSerialNo.BusObj => store.getters.form);
  // PerSonal = form.value;
  // init();
  // console.log(22222, admissionNumInput);
});
</script>

<style scoped lang="scss">
.PerSonal {
}
</style>
